<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'sun-graph'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const s = this.width.replace('px', '')
      const r0 = (Number(s) * 5) / 600
      const r1 = (Number(s) * 80) / 600
      const r2 = (Number(s) * 145) / 600
      const r3 = (Number(s) * 160) / 600
      const r4 = (Number(s) * 180) / 600
      const r5 = (Number(s) * 195) / 600

      this.chart = this.$echarts.init(this.$el)
      const colors = ['#0197d4', '#6dcaf3', '#066db7', '#15d7fa', '#00b0f0']

      const bgColor = '#2E2733'

      const itemStyle = {
        star5: {
          color: colors[0]
        },
        star4: {
          color: colors[1]
        },
        star3: {
          color: colors[2]
        },
        star2: {
          color: colors[3]
        },
        star1: {
          color: colors[4]
        }
      }

      const data = [
        {
          name: '风灾',
          itemStyle: {
            normal: {
              color: colors[1]
            }
          },
          children: [
            {
              name: '台风',
              children: [
                {
                  name: '5☆',
                  children: [
                    {
                      name: '超强台风'
                    }
                  ]
                },
                {
                  name: '4☆',
                  children: [
                    {
                      name: '强台风'
                    }
                  ]
                },
                {
                  name: '3☆',
                  children: [
                    {
                      name: '台风'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: '强热带风暴'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '热带风暴'
                    }
                  ]
                }
              ]
            },
            {
              name: '暴风',
              children: [
                {
                  name: '2☆',
                  children: [
                    {
                      name: '热带气旋'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '非热带气旋'
                    }
                  ]
                }
              ]
            },
            {
              name: '龙卷风',
              children: [
                {
                  name: '5☆',
                  children: [
                    {
                      name: 'EF5'
                    }
                  ]
                },
                {
                  name: '4☆',
                  children: [
                    {
                      name: 'EF4'
                    }
                  ]
                },
                {
                  name: '3☆',
                  children: [
                    {
                      name: 'EF3'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: 'EF2'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: 'EF1'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          name: '雷电',
          itemStyle: {
            color: colors[4]
          },
          children: [
            {
              name: '雷暴',
              children: [
                {
                  name: '3☆',
                  children: [
                    {
                      name: '严重雷暴'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: '强雷暴'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '一般雷暴'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          name: '洪涝',
          itemStyle: {
            color: colors[1]
          },
          children: [
            {
              name: '河水涨潮',
              children: [
                {
                  name: '3☆',
                  children: [
                    {
                      name: '达50Y水位'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: '达20Y水位'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '达警戒水位'
                    }
                  ]
                }
              ]
            },
            {
              name: '湖泊溃堤',
              children: [
                {
                  name: '3☆',
                  children: [
                    {
                      name: '三级溃堤'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: '二级溃堤'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '一级溃堤'
                    }
                  ]
                }
              ]
            },
            {
              name: '雨水泛滥',
              children: [
                {
                  name: '3☆',
                  children: [
                    {
                      name: '严重内涝'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: '形成洼地'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '低洼积水'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          name: '高温',
          itemStyle: {
            color: colors[2]
          },
          children: [
            {
              name: '高温',
              children: [
                {
                  name: '4☆',
                  children: [
                    {
                      name: '红色预警'
                    }
                  ]
                },
                {
                  name: '3☆',
                  children: [
                    {
                      name: '橙色预警'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: '黄色预警'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '蓝色预警'
                    }
                  ]
                }
              ]
            },
            {
              name: '热浪',
              children: [
                {
                  name: '3☆',
                  children: [
                    {
                      name: '严重热浪'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: '长时间热浪'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '常规热浪'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          name: '干旱',
          itemStyle: {
            color: colors[2]
          },
          children: [
            {
              name: '水位下降',
              children: [
                {
                  name: '3☆',
                  children: [
                    {
                      name: '下幅2m以上'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: '下幅1.5-2m'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '下幅1-1.5m'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '蓝色预警'
                    }
                  ]
                }
              ]
            },
            {
              name: '土地盐碱化',
              children: [
                {
                  name: '3☆',
                  children: [
                    {
                      name: '严重热浪'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: '长时间热浪'
                    }
                  ]
                },
                {
                  name: '1☆',
                  children: [
                    {
                      name: '常规热浪'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]

      for (var j = 0; j < data.length; ++j) {
        var level1 = data[j].children
        for (var i = 0; i < level1.length; ++i) {
          var block = level1[i].children
          var bookScore = []
          var bookScoreId
          for (var star = 0; star < block.length; ++star) {
            var style = (function (name) {
              switch (name) {
              case '5☆':
                bookScoreId = 0
                return itemStyle.star5
              case '4☆':
                bookScoreId = 1
                return itemStyle.star4
              case '3☆':
                bookScoreId = 2
                return itemStyle.star3
              case '2☆':
                bookScoreId = 3
                return itemStyle.star2
              case '1☆':
                bookScoreId = 4
                return itemStyle.star1
              }
            })(block[star].name)

            block[star].label = {
              color: style.color,
              downplay: {
                opacity: 0.5
              }
            }

            if (block[star].children) {
              style = {
                opacity: 1,
                color: style.color
              }
              block[star].children.forEach(function (book) {
                book.value = 1
                book.itemStyle = style

                book.label = {
                  color: style.color
                }

                var value = 1
                if (bookScoreId === 0 || bookScoreId === 3) {
                  value = 5
                }

                if (bookScore[bookScoreId]) {
                  bookScore[bookScoreId].value += value
                } else {
                  bookScore[bookScoreId] = {
                    color: colors[bookScoreId],
                    value: value
                  }
                }
              })
            }
          }

          level1[i].itemStyle = {
            color: data[j].itemStyle.color
          }
        }
      }
      this.chart.setOption({
        color: colors,
        series: [
          {
            type: 'sunburst',
            center: ['50%', '45%'],
            data: data,
            sort: function (a, b) {
              if (a.depth === 1) {
                return b.getValue() - a.getValue()
              } else {
                return a.dataIndex - b.dataIndex
              }
            },
            label: {
              rotate: 'radial',
              color: bgColor
            },
            itemStyle: {
              borderColor: bgColor,
              borderWidth: 2
            },
            levels: [
              {},
              {
                r0: r0,
                r: r1,
                label: {
                  rotate: 0
                }
              },
              {
                r0: r1,
                r: r2
              },
              {
                r0: r3,
                r: r4,
                itemStyle: {
                  shadowBlur: 2,
                  shadowColor: colors[2],
                  color: 'transparent'
                },
                label: {
                  rotate: 'tangential',
                  fontSize: 10,
                  color: colors[0]
                }
              },
              {
                r0: r4,
                r: r5,
                itemStyle: {
                  shadowBlur: 80,
                  shadowColor: colors[0]
                },
                label: {
                  position: 'outside',
                  textShadowBlur: 5,
                  textShadowColor: '#333'
                },
                downplay: {
                  label: {
                    opacity: 0.5
                  }
                }
              }
            ]
          }
        ]
      })
      this.addClickEvent()
    },
    addClickEvent() {
      const that = this
      this.chart.on('click', (params) => {
        if (params && params.name) {
          that.$emit('updateDetail', params.name)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sun-graph {
  height: 100%;
}
</style>
